<template>
    <div class="invoice-wrapper">
        <IHeader class="header" back="true" title="填写发票"></IHeader>
        <scroller class="invoice-content">
            <text class="invoice-tip">请选择发票类型</text>
            <div class="type-wrapper bgc_fff">
                <div class="invoice-type flex_row">
                    <image @click="selectThisType('1')" class="type-item" :src="imgPath(typeIndex === '1' ? 'ele_invoice_active.png' : 'ele_invoice.png')"></image>
                    <image @click="selectThisType('2')" class="type-item" :src="imgPath(typeIndex === '2' ? 'paper_invoice_active.png' : 'paper_invoice.png')"></image>
                </div>
                <div class="tip-wrapper flex_row">
                    <text class="tips">推荐使用电子发票</text>
                    <Question @doclick="suggestEle"></Question>
                </div>
                <text class="suggest-tip" v-if="suggestShow">电子发票与纸质发票具有同等的法律效力，可支持报销入账</text>
            </div>
            <text class="invoice-tip">发票详情</text>
            <div class="invoice-form bgc_fff">
                <div class="info-cell flex_row item-height border-bottom-ebebeb">
                    <Label content="抬头类型"></Label>
                    <div class="handleChoose flex_row padding_right_44">
                        <Radio v-for="(item, index) in personalType" :class="[index !== 0 ? 'margin_left_50' : '']" @doclick="handleIfPersonal(item.type)" :check="personalIndex === item.type" :key="index" :word="item.name"></Radio>
                    </div>
                </div>
                <div class="info-cell flex_row item-height border-bottom-ebebeb">
                    <Label content="发票抬头" :error="invoiceName.error"></Label>
                    <input class="write enterpriseName col_868686" v-model="invoiceName.value"  placeholder="请输入单位全称/个人" type="text">
                </div>
                <div class="info-cell flex_row item-height border-bottom-ebebeb" v-if="personalIndex === '1'">
                    <Label content="税号" :error="companyForm.number.error"></Label>
                    <input v-model="companyForm.number.value" class="write enterpriseName col_868686" placeholder="请输入纳税人识别号" type="text">
                </div>
                <div class="info-cell flex_row item-height border-bottom-ebebeb" v-if="typeIndex === '2'">
                    <Label content="收件人" :error="paperForm.contact.error"></Label>
                    <input v-model="paperForm.contact.value" class="write enterpriseName col_868686" placeholder="请输入收件人姓名" type="text">
                </div>
                <div class="info-cell flex_row item-height border-bottom-ebebeb" v-if="typeIndex === '2'" @click="handleSelectArea">
                    <Label content="所在地区" :error="paperForm.area.error"></Label>
                    <div class="align_center flex_row">
                        <text class="col_868686 fs_26">{{paperForm.area.value}}</text>
                        <image class="arrow_right_small" :src="imgPath('arrow_right_small.png')"></image>
                    </div>
                </div>
                <div class="info-cell flex_row item-height border-bottom-ebebeb" v-if="typeIndex === '2'">
                    <Label content="详细地址" :error="paperForm.address.error"></Label>
                    <input v-model="paperForm.address.value" class="write enterpriseName col_868686" placeholder="请输入收件人详细地址" type="text">
                </div>
                <div class="info-cell flex_row item-height border-bottom-ebebeb" v-if="typeIndex === '1'">
                    <Label content="电子邮件" :error="email.error"></Label>
                    <input v-model="email.value" class="write enterpriseName col_868686" placeholder="请输入电子邮件，用于向您发送电子发票" type="text">
                </div>
                <div class="info-cell flex_row item-height border-bottom-ebebeb" v-if="personalIndex === '1'">
                    <Label content="开户行和账号" notnecessary="true"></Label>
                    <input v-model="companyForm.bankName.value" class="write bankName col_868686" placeholder="请输入开户银行名称" type="text">
                </div>
                <div class="info-cell flex_row item-height border-bottom-ebebeb" v-if="personalIndex === '1'">
                    <Label content="" notnecessary="true"></Label>
                    <input v-model="companyForm.bankAccount.value" class="write bankName col_868686" placeholder="请输入开户银行账号" type="text">
                </div>
                <div class="info-cell flex_row item-height border-bottom-ebebeb">
                    <Label content="备注信息" notnecessary="true"></Label>
                    <input v-model="note" class="write enterpriseName col_868686" placeholder="请输入备注信息" type="text">
                </div>
            </div>
            <Buttons class="margin_top_70" word="提交" @doclick="handleSubmit"></Buttons>
        </scroller>
        <!--地址选择-->
        <Address :show="addressShow" @cancel="handleAddressCancel" @confirm="handleAddressConfirm"></Address>
        <!--错误弹窗-->
        <Modal :show="modalShow" :word="modalWord" type="0"></Modal>
        <!--loading-->
        <wxc-loading :show="loadingShow" :need-mask="needMask"></wxc-loading>
    </div>
</template>

<script>
import IHeader from '@/components/header'
import Label from '@/components/label'
import Question from '@/components/question'
import Radio from '@/components/radio'
import Buttons from '@/components/buttons'
import Address from '@/components/address'
import Modal from '@/components/modal'
import { WxcLoading } from 'weex-ui'
import { validatenull, validateEmail } from '@/util/validate'
import {addInvoice} from '@/api/user'
const modal = weex.requireModule('modal')

export default {
  name: 'invoice',
  data () {
    return {
      loadingShow: false, // loading
      needMask: true,
      modalShow: false, // 显示错误弹窗
      modalWord: '', // 弹窗提示
      suggestShow: false, // 推荐使用电子发票提示
      addressShow: false, // 地区选择显示
      invoiceName: {
        value: '',
        name: '发票抬头',
        error: false
      }, // 发票抬头
      note: '', // 备注
      companyForm: {
        number: {
          value: '',
          name: '税号',
          error: false
        }, // 税号
        bankName: {
          value: ''
        }, // 银行名称
        bankAccount: {
          value: ''
        } // 银行名称
      }, // 企业
      email: {
        value: '',
        name: '电子邮件',
        error: false
      }, // 电子邮件
      paperForm: {
        contact: {
          value: '',
          name: '收件人',
          error: false
        },
        area: {
          value: '请选择',
          id: '', // id
          name: '所在地区',
          error: false
        },
        address: {
          value: '',
          name: '详细地址',
          error: false
        }
      }, // 纸质发票
      invoiceType: [
        {
          name: '电子发票',
          type: '1'
        },
        {
          name: '纸质发票',
          type: '2'
        }
      ], // 发票类型
      typeIndex: '1', // 类型下标
      personalType: [
        {
          name: '企业',
          type: '1'
        },
        {
          name: '个人',
          type: '2'
        }
      ], // 是否个人
      personalIndex: '1' // 个人下标
    }
  },
  methods: {
    selectThisType (type) { // 发票类型切换
      this.typeIndex = type
    },
    suggestEle () { // 推荐使用电子发票提示
      this.suggestShow = !this.suggestShow
    },
    handleIfPersonal (type) { // 抬头类型切换
      this.personalIndex = type
    },
    handleSelectArea () { // 打开地区选择
      this.addressShow = true
    },
    handleAddressCancel () { // 取消
      this.addressShow = false
    },
    handleAddressConfirm (obj) { // 确定
      this.paperForm.area.value = obj.str
      this.paperForm.area.id = obj.val
      this.addressShow = false
    },
    handleSubmit () { // 提交
      const that = this
      let params = {}
      if (validatenull(that.invoiceName.value)) {
        that.invoiceName.error = true
        that.modalWord = that.invoiceName.name + '信息有误'
        that.modalShow = true
        setTimeout(() => {
          that.modalShow = false
        }, 1000)
        return
      }
      that.invoiceName.error = false
      params.invoiceRise = that.invoiceName.value
      if (that.typeIndex === '1') {
        let res = validateEmail(that.email.value)
        if (!res.result) {
          that.email.error = true
          that.modalWord = res.msg
          that.modalShow = true
          setTimeout(() => {
            that.modalShow = false
          }, 1000)
          return
        }
        that.email.error = false
        params.email = that.email.value
      } else {
        for (let i in that.paperForm) {
          if (validatenull(that.paperForm[i].value) || that.paperForm[i].value === '请选择') {
            that.modalShow = true
            that.modalWord = that.paperForm[i].name + '信息有误'
            that.paperForm[i].error = true
            setTimeout(() => {
              that.modalShow = false
            }, 1000)
            return
          }
          that.paperForm[i].error = false
        }
        params.recipient = that.paperForm.contact.value
        let ids = that.paperForm.area.id.split(' ')
        params.provinceId = ids[0]
        params.cityId = ids[1]
        params.districtId = ids[2]
        params.address = that.paperForm.address.value
      }
      if (that.personalIndex === '1') {
        if (validatenull(that.companyForm.number.value)) {
          that.modalShow = true
          that.modalWord = that.companyForm.number.name + '信息有误'
          that.companyForm.number.error = true
          setTimeout(() => {
            that.modalShow = false
          }, 1000)
          return
        }
        that.companyForm.number.error = false
        params.ein = that.companyForm.number.value
        params.bankAndAccount = that.companyForm.bankName.value + that.companyForm.bankAccount.value
      }
      params.noteInformation = that.note
      params.invoiceType = that.typeIndex
      params.riseType = that.personalIndex
      that.loadingShow = true
      that.$api.post(addInvoice, params, () => {
        that.loadingShow = false
        modal.toast({
          message: '提交成功'
        })
        that.$router.push('/invoice/invoiceDetail')
      }, () => {
        that.loadingShow = false
      }, true)
    }
  },
  components: {
    IHeader,
    Label,
    Question,
    Modal,
    WxcLoading,
    Buttons,
    Radio,
    Address
  }
}
</script>

<style scoped>
    .fs_26 {
        font-size: 26px;
    }
    .item-height {
        height: 88px;
        line-height: 88px;
    }
    .align_center {
        align-items: center;
    }
    .flex_row {
        flex-direction: row;
    }
    .info-cell {
        padding-left: 24px;
        padding-right: 24px;
        justify-content: space-between;
    }
    .margin_top_70 {
        margin-top: 70px;
    }
    .margin_left_50 {
        margin-left: 50px;
    }
    .padding_right_44 {
        padding-right: 44px;
    }
    .col_464646 {
        color: #464646;
    }
    .col_868686 {
        color: #868686;
    }
    .bgc_fff {
        background-color: #fff;
    }
    .border-bottom-ebebeb {
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #ebebeb;
    }
    .invoice-content {
        padding-top: 100px;
        padding-bottom: 40px;
    }
    .invoice-tip {
        padding-left: 24px;
        padding-right: 24px;
        font-size: 28px;
        font-weight: bold;
        color: #464646;
        line-height: 76px;
    }
    .type-wrapper {
        margin-bottom: 12px;
        padding-left: 24px;
        padding-right: 24px;
        padding-top: 24px;
        padding-bottom: 24px;
    }
    .invoice-type {
        justify-content: space-between;
    }
    .type-item {
        width: 340px;
        height: 200px;
        border-radius: 20px;
    }
    .tip-wrapper {
        margin-top: 16px;
        align-items: center;
    }
    .tips {
        font-size: 28px;
        color: #000;
        font-weight: bold;
        /*flex: 1;*/
    }
    .suggest-tip {
        /*width: 700px;*/
        flex: 1;
        height: 60px;
        margin-top: 12px;
        padding-left: 16px;
        padding-right: 16px;
        border-width: 1px;
        border-style: solid;
        border-color: #ff0f37;
        color: #ff0f37;
        font-size: 24px;
        line-height: 58px;
        border-radius: 5px;
    }
    .write {
        /*padding-right: 44px;*/
        text-align: right;
        border-width: 0px;
        font-size: 26px;
        placeholder-color: #cecece;
    }
    .bankName {
        width: 440px;
    }
    .enterpriseName {
        width: 480px;
    }
</style>
